<template>
  <div>
    <div class="table-operator">
      <a-button v-action:edit type="primary" icon="check-circle" @click="validate" :loading="confirmLoading">保存
      </a-button>
      <a-button v-action:edit icon="rollback" @click="handleCancel">返回</a-button>
    </div>
    <!--  <a-modal title="小程序管理" :width="1300" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false"-->
    <!--           @ok="handleSubmit"-->
    <!--           @cancel="handleCancel">-->
    <!--    <a-spin :spinning="confirmLoading">-->
    <div>
      <a-card class="card" title="服务商基本信息">
        <a-form @submit="handleSubmit" :form="form" class="form">
          <a-row class="form-row" :gutter="96">
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务商名称">
                <a-select showSearch optionFilterProp="children" :filterOption="filterOption" :disabled="isDisabled"
                          v-decorator="['companyId', {rules: [{required: true, message: '必输'}]}]">
                  <a-select-option v-for="item in companys" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="停车积分抵扣比例">
                <a-input v-decorator="[ 'parkingIntegralRate', {rules: [] }]"/>
              </a-form-item>
            </a-col>

            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="签到获得积分数量">
                <a-input v-decorator="[ 'signGetPoint', {rules: [] }]"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
      <a-form :form="form" @submit="handleSubmit">
        <a-card class="card" title="微信小程序配置">
          <a-row :gutter="0">
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序名称">
                <a-input v-decorator="['name', {rules: [{required: true, message: '必输'}]}]"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序appid">
                <a-input v-decorator="[ 'miniAppid', {rules: [{required: true, message: '必输'}] }]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序secret">
                <a-input v-decorator="[ 'miniSecret', {rules: [{required: true, message: '必输'}] }]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序商户号">
                <a-input v-decorator="[ 'wxmchid', {rules: [] }]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序主题色">
                <a-input v-decorator="[ 'miniColor', {rules: [] }]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分享获取积分次数" extra="一件商品，分享给多少个用户之后就不获取积分">
                <a-input v-decorator="[ 'shareNum', {rules: [] }]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分享获取积分数量" extra="分享一次商品获取多少积分">
                <a-input v-decorator="[ 'shareAdd', {rules: [] }]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="购买后获取积分百分比"
                           extra="这里设置0.1就代表百分之十,0.01就代表百分之一">
                <a-input v-decorator="[ 'shareBuyAdd', {rules: [] }]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="购买订阅模板id">
                <a-input v-decorator="[ 'templateId', {rules: [] }]"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="积分订阅模板id">
              <a-input v-decorator="[ 'jifenTemplateId', {rules: [] }]"/>
            </a-form-item>
          </a-col>
        </a-card>


        <a-card class="card" title="支付宝配置">
          <a-row :gutter="0">
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="停车小程序appid">
                <a-input v-decorator="[ 'aliAppid', {rules: [] }]"/>
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="停车小程序接口加密AES秘钥">
                <a-textarea v-decorator="[ 'aliAes', {rules: [] }]" :auto-size="{ minRows: 3, maxRows: 5 }"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支付宝会员卡编码">
                <a-input v-decorator="[ 'aliCard', {rules: [] }]"/>
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="停车小程序私钥">
                <a-textarea v-decorator="[ 'aliPrivateKey', {rules: [] }]" :auto-size="{ minRows: 3, maxRows: 5 }"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支付宝PID">
                <a-input v-decorator="[ 'aliPid', {rules: [] }]"/>
              </a-form-item>
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="停车小程序支付宝公钥">
                <a-textarea v-decorator="[ 'aliPublicKey', {rules: [] }]" :auto-size="{ minRows: 3, maxRows: 5 }"/>
              </a-form-item>
            </a-col>

            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商圈应用授权token">
                <a-input v-decorator="[ 'aliAuthToken', {rules: [] }]"/>
              </a-form-item>
            </a-col>

            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="停车系统收款支付宝授权Token">
                <a-input v-decorator="[ 'parkingSystemAuthToken', {rules: [] }]"/>
              </a-form-item>
            </a-col>

            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支付宝停车场名称">
                <a-input v-decorator="[ 'parkingName', {rules: [] }]"/>
              </a-form-item>
            </a-col>

            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支付宝停车场Id">
                <a-input v-decorator="[ 'parkingId', {rules: [] }]"/>
              </a-form-item>
            </a-col>

            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支付宝领取会员卡链接">
                <a-input v-decorator="[ 'cardCollectionLink', {rules: [] }]"/>
              </a-form-item>
            </a-col>

          </a-row>
        </a-card>

        <a-card class="card" title="微信小程序配图">
          <a-row :gutter="0">
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序背景图" extra="推荐尺寸500*250">
                <a-upload
                  listType="picture-card"
                  class="avatar-uploader"
                  :showUploadList="false"
                  :action="baseUrl + '/system/common/uploadFile'"
                  :beforeUpload="beforeUpload"
                  @change="uploadChange"
                >
                  <img v-if="imageUrl" :src="imageUrl" alt="avatar" width="300px"/>
                  <div v-else>
                    <a-icon :type="confirmLoading ? 'loading' : 'plus'"/>
                    <div class="ant-upload-text">Upload</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序启动图" extra="推荐尺寸600*1000">
                <a-upload
                  listType="picture-card"
                  class="avatar-uploader"
                  :showUploadList="false"
                  :action="baseUrl + '/system/common/uploadFile'"
                  :beforeUpload="beforeUpload"
                  @change="uploadChange2"
                >
                  <img v-if="imageUrl2" :src="imageUrl2" alt="avatar" width="300px"/>
                  <div v-else>
                    <a-icon :type="confirmLoading ? 'loading' : 'plus'"/>
                    <div class="ant-upload-text">Upload</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="积分说明图" extra="推荐尺寸600*1000">
                <a-upload
                  listType="picture-card"
                  class="avatar-uploader"
                  :showUploadList="false"
                  :action="baseUrl + '/system/common/uploadFile'"
                  :beforeUpload="beforeUpload"
                  @change="uploadChange3"
                >
                  <img v-if="imageUrl3" :src="imageUrl3" alt="avatar" width="300px"/>
                  <div v-else>
                    <a-icon :type="confirmLoading ? 'loading' : 'plus'"/>
                    <div class="ant-upload-text">Upload</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form>
    </div>
    <!--    </a-spin>-->
    <!--  </a-modal>-->
  </div>
</template>

<script>
  import pick from 'lodash.pick'
  import { saveOrUpdate } from '@/api/mini/customer'
  import { optionselect } from '@/api/system/company'

  /**
   * 数据
   */
  const data = function() {
    return {
      companys:[],
      editProps: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      id: null,
      visible: false,
      confirmLoading: false,
      isDisabled: false,
      //图片相关
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      imageUrl: '',
      fileName: '',
      imageUrl2: '',
      fileName2: '',
      imageUrl3: '',
      fileName3: '',
      form: this.$form.createForm(this)
    }
  }

  const created = function() {
    optionselect().then(res => {
      if (res.code === 200) {
        this.companys = res.data
      }
    })

    this.$nextTick(() => {
      this.loadEditInfo(this.record)
    })
  }

  export default {
    props: {
      record: {
        type: [Object, String],
        default: null
      }
    },
    data: data,
    created: created,
    /**
     * 方法
     */
    methods: {
      add() {
        this.visible = true
      },
      handleSubmit(e) {
        e.preventDefault()
      },
      loadEditInfo(record) {
        if (!record) {
          return
        }
        this.visible = true
        this.id = record.id
        this.isDisabled = true
        this.imageUrl = record.fileUrl
        this.imageUrl2 = record.fileUrl2
        this.imageUrl3 = record.fileUrl3
        // const { form: { setFieldsValue } } = this
        const { form } = this
        const formData = pick(record, ['signGetPoint','parkingIntegralRate','cardCollectionLink','parkingId','parkingName','parkingSystemAuthToken','companyCode','aliAuthToken','jifenTemplateId', 'companyId', 'name', 'miniAppid', 'aliCard', 'aliPid', 'miniSecret', 'miniColor', 'shareNum', 'shareAdd', 'shareBuyAdd', 'wxmchid', 'templateId', 'aliAppid', 'aliPrivateKey', 'aliPublicKey', 'aliAes'])
        form.setFieldsValue(formData)

      },
      validate() {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            values.id = this.id
            values.fileUrl = this.imageUrl
            values.fileUrl2 = this.imageUrl2
            values.fileUrl3 = this.imageUrl3
            saveOrUpdate(values).then((res) => {
              this.confirmLoading = false
              if (res.code === 200) {
                this.handleCancel()
                this.$emit('ok')
              }
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel() {
        // this.id = null
        // this.visible = false
        // this.isDisabled = false
        // this.confirmLoading = false
        // this.form.resetFields()
        // this.imageUrl = null
        // this.imageUrl2 = null
        // this.imageUrl3 = null
        this.$emit('onGoBack')
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      uploadChange(info) {
        if (info.file.status === 'uploading') {
          this.confirmLoading = true
          return
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
          this.imageUrl = info.file.response.fileUrl
          this.filename = info.file.response.filename
          this.confirmLoading = false
        }
      },
      uploadChange2(info) {
        if (info.file.status === 'uploading') {
          this.confirmLoading = true
          return
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
          this.imageUrl2 = info.file.response.fileUrl
          this.filename2 = info.file.response.filename
          this.confirmLoading = false
        }
      },
      uploadChange3(info) {
        if (info.file.status === 'uploading') {
          this.confirmLoading = true
          return
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
          this.imageUrl3 = info.file.response.fileUrl
          this.filename3 = info.file.response.filename
          this.confirmLoading = false
        }
      },
      beforeUpload(file) {
        return true
      }
    }
  }
</script>

<style scoped>
  .card {
    margin-bottom: 15px;
  }
</style>